<template>
    <!-- 搜索表单-->
  
    <!-- <el-button type="primary" @click="handleSearch">查询</el-button> -->
    
    <el-dialog title="审批" v-model="dialogVisibleEdit" width="30%">
      <el-form ref="form" :model="employee" label-width="80px">
        <el-form-item label="员工编号">
          <el-input v-model="employee.employeeId" disabled></el-input>
        </el-form-item>
        <el-form-item label="员工姓名">
          <el-input v-model="employee.employeeName"></el-input>
        </el-form-item>
        <el-form-item label="开始时间">
          <el-input v-model="employee.startDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-input v-model="employee.endDate" disabled></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="employee.status" class="m-2" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
  
        <el-form-item>
          <el-button type="primary" @click="handleEdit">提交</el-button>
          <el-button @click="dialogVisibleEdit = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  
    <!-- 表格数据 -->
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName"
      class="my-table"
    >
      <el-table-column prop="employeeId" label="员工编号" align="center">
      </el-table-column>
      <el-table-column prop="employeeName" label="员工姓名" align="center">
      </el-table-column>
      <el-table-column prop="startDate" label="开始日期" align="center">
      </el-table-column>
      <el-table-column prop="endDate" label="结束日期" align="center">
      </el-table-column>
      <el-table-column prop="status" label="状态" align="center">
      </el-table-column>
  
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button :disabled="disabledFunc(scope.row)" type="primary" size="small" @click="handleUpdate(scope.row)"
            >审批</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parseInt(totalCount)"
    >
    </el-pagination>
  </template>
  
  <script>
  import axios from 'axios';
  import { reactive, ref } from 'vue';
  const API_URL = 'http://localhost:8080/approvals'; // 替换为实际的 API 地址
  const formAdd = ref();
  export default {
    data() {
      return {
        pageSize: 10,
        currentPage: 1,
        totalCount: 0,
        tableData: [],
        dialogVisible: false,
        dialogVisibleEdit: false,
        employee: {
          id: '',
          employeeName: '',
          department: '',
          startDate: '',
          endDate: '',
        },
        options: [
          {
            value: '已批准',
            label: '已批准',
          },
          {
            value: '待审批',
            label: '待审批',
          },
          {
            value: '已拒绝',
            label: '已拒绝',
          }
        ],
      };
    },
    mounted() {
      this.getAll();
    },
    methods: {
      async handleSearch() {
        this.currentPage = 1;
        this.pageSize = 10;
        this.getAll();
      },
      getAll() {
        //发送ajax请求
        axios
          .get(
            'http://localhost:8080/approvals/pagePunch?currentPage=' +
              this.currentPage +
              '&pageSize=' +
              this.pageSize
          )
          .then((res) => {
            console.log(res.data);
            //设置表格数据
            this.tableData = res.data.rows;
            this.totalCount = res.data.totalCount;
          });
      },
      resetForm() {
        formAdd.resetFields();
      },
      handleCreate() {
        this.dialogVisible = true;
        this.resetForm();
      },

      async handleUpdate(row) {
        console.log('ddddddd', row);
        this.employee = { ...row };
        this.dialogVisibleEdit = true;
      },
      async handleEdit() {
        try {
          await axios.put(API_URL + '/updatePunch', this.employee);
          this.dialogVisibleEdit = false;
          this.getAll();
          this.$message.success('审批成功');
        } catch (error) {
          console.error(error);
          this.$message.error('审批失败');
        }
      },
      tableRowClassName({ row, rowIndex }) {
        if (rowIndex % 2 === 1) {
          return 'table-row-even';
        }
        return '';
      },
      //分页
      handleSizeChange(val) {
        // console.log(`每页 ${val} 条`);
        this.pageSize = val;
        this.getAll();
      },
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        //点击后重新设置当前页码
        this.currentPage = val;
        this.getAll();
      },
      disabledFunc(row) {
        if (row.status === '已批准' || row.status === '已拒绝') {
          return true;
        }
        return false;
      },
    },
  };
  </script>
  
  <style scoped>
  .table-row-even {
    background-color: #f5f7fa;
  }
  </style>
  